<!--播放器的  底部 -->
<template>
  <div v-if="currentSong.id != null">
    <Minibar
      :value="progress"
      @input="changeProgressAction"
      :currentTime="currentTime"
      :duration="duration"
      @mousedown="handleMouseAction('down')"
      @mouseup="handleMouseAction('up')"
    />
    <div class="mini-play-container">
      <!-- 专辑图片 -->
      <div class="iconmini">
        <div class="img-wrapper">
          <!-- 有没有在播放 添加响应的属性 -->
          <img
            @click="goNomalplay"
            class="play"
            :class="{ pasue: !isplay }"
            :src="currentSong.al.picUrl"
          />
        </div>
      </div>
      <!-- 歌曲名 专辑名 -->
      <div class="textmini">
        <span class="name">{{ currentSong.name }}</span>
        <p class="desc">{{ currentSong.ar[0].name }}</p>
      </div>
      <!-- 播放按钮 -->
      <div class="playbtn">
        <div class="control" @click="playmusic">
          <i v-show="!isplay">
            <img src="..\..\assets\playmusic.png" />
          </i>
          <i v-show="isplay">
            <img src="..\..\assets\pausemusic.png" />
          </i>
        </div>
        <el-dropdown @command="handleCommand">
          <div class="control">
            <i>
              <img src="..\..\assets\musiclist.png" />
            </i>
            <el-dropdown-menu slot="dropdown" size="mini  ">
              <el-dropdown-item
                v-for="(item, index) in playList"
                :key="index"
                :command="item.id"
              >
                <span v-text="item.name"></span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </div>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Minibar from "./bar/Minibar";
export default {
  name: "Minplayer",
  data() {
    return {
      drawer: false,
    };
  },
  props: ["progress", "currentTime", "duration"],
  computed: {
    ...mapState("song", ["isplay", "currentSong"]),
    ...mapGetters("song", ["playList"]),
  },
  components: {
    Minibar,
  },
  methods: {
    handleCommand(command) {
      var perList = this.playList.filter((item) => item.id == command);
      this.$store.commit({
        type: "song/SELECTSONGBYID",
        id: command,
        list: perList[0],
      });
    },
    playmusic() {
      this.$store.commit("song/ISPLAYMUSIC", this.isplay);
    },
    goNomalplay() {
      this.$store.commit("song/GOTONOMAL", true);
    },
    //修改进度条
    changeProgressAction(newvalue) {
      //触发父组件的change事件,将数据传给父组件
      this.$emit("change", newvalue);
    },
    //监听鼠标子组件传来的事件
    handleMouseAction(flag) {
      this.$emit("mouseChange", flag);
    },
  },
};
</script>


<style scoped lang="scss">
// 旋转动画
@keyframes rotate {
  0% {
    transform: rotat(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mini-play-container {
  /* 进行固定定位  --相对于整个页面*/
  position: fixed;
  left: 0;
  bottom: 0;
  /* 提高层级  --设置为1000 */
  z-index: 1000;
  width: 100%;
  height: 50px;
  /* 内部标签的样式 */
  display: flex;
  align-items: center;
  background: #212529;
  opacity: 0.99;
  //阴影
}
/* 设置专辑图片样式 */
.iconmini {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0 20px 0 550px;
  img {
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    // 10秒 rotate 匀速播放 infinite无限
    animation: rotate 10s linear infinite;

    //当图片有pasue的时候拥有pasue的动画
    &.pasue {
      animation-play-state: paused;
    }
  }
}
.iconmini :hover {
  width: 42px;
  height: 42px;
}
//歌曲信息的css
.textmini {
  flex: 1;
  display: flex;
  // flex-direction: row;
  // line-height: 18px;

  //歌曲名css
  .name {
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/
    white-space: nowrap; /*规定文本不进行换行*/
    margin-top: -15px;
    font-size: 12px;
    color: #fff;
  }
  //歌曲专辑css
  .desc {
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/
    white-space: nowrap; /*规定文本不进行换行*/
    margin-left: 5px;
    margin-top: -15px;
    font-size: 10px;
    color: #999;
  }
}
//播放按钮的css
.playbtn {
  margin-right: 550px;
}
.control {
  float: left;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0 2px 0 2px;
  img {
    width: 100%;
    height: 100%;
  }
}
.control :hover {
  width: 42px;
  height: 42px;
}
.eldrawer {
  z-index: 1100;
  color: red;
}
.el-dropdown-menu,el-popper{
  max-height: 300px;
  overflow: auto;
}

</style>